<div class="add-model-form-container" xmlns:th="https://www.thymeleaf.org">
    <div class="add-model-form-title">新增属性</div>
    <form class="layui-form" id="addPropertyForm" lay-filter="add-property-form">
        <input name="modelId" class="layui-hide" th:value="${model.id}">

        <div class="layui-form-item">
            <label class="layui-form-label red-star">属性</label>
            <div class="layui-input-block">
                <input name="propertyName"
                       lay-verify="required"
                       lay-reqText="属性名是必填项"
                       lay-verType="tips"
                       placeholder="填写属性名"
                       class="layui-input">
                <!--                            <div class="property-input-row">-->
                <!--                            </div>-->
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label red-star">属性类型</label>
            <div class="layui-input-block">
                <select id="proType"
                        name="propertyTypeId"
                        lay-verType="tips"
                        lay-verText="字段类型为必选项"
                        lay-verify="required">
                    <option value="">选择属性类型</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label red-star">表字段类型</label>
            <div class="layui-input-block">
                <select id="colType"
                        name="columnTypeId"
                        lay-verType="tips"
                        lay-verText="表字段类型为必选项"
                        lay-verify="required">
                    <option value="">选择表字段类型</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">表字段长度</label>
            <div class="layui-input-block">
                <input class="layui-input"
                       placeholder="输入表字段长度"
                       name="columnLength"
                       lay-verify="mynumber"
                       lay-verType="tips"
                       type="number">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label red-star">属性说明</label>
            <div class="layui-input-block">
                <input name="remark"
                       lay-verify="required"
                       lay-reqText="属性说明不允许为空"
                       lay-verType="tips"
                       placeholder="填写属性说明"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center">
            <button type="submit"
                    class="layui-btn"
                    lay-submit
                    lay-filter="add-property-form-submit">提交保存</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>

<script>
    layui.config({
        base: '/modules/'
    }).use(['table', 'form', 'admin', 'global'], async function () {
        const table = layui.table
        const assit = layui.admin
        const form = layui.form
        const config = layui.global
        const $ = layui.$

        // 获取字段、属性类型的选择列表
        assit.fetchMDTypeData().then(r => {
            assit.initSelector(r.proTypeList, $('#proType'))
            assit.initSelector(r.colTypeList, $('#colType'))
            form.render("select", "add-property-form")
        })

        // 自定义表单验证规则
        form.verify({
            mynumber: function (value, item) {
                if (value !== '' && !(/^\d+$/.test(value))) {
                    return '只能是纯数字或者留空'
                }
            }
        })

        // 提交 add-property-form 表单
        form.on('submit(add-property-form-submit)', function(data) {
            const obj = JSON.parse(JSON.stringify(data.field))
            obj.columnName = config.toLine(obj.propertyName)
            // 请求后端
            assit.post('/model/detail', obj)
                .then(r => {
                    if (r.code === 0) {
                        layer.msg('添加成功', {icon: 1, time: 2000})
                        setTimeout(_ => {
                            // 只更新数据
                            table.reloadData('MD_TABLE')
                            $('#addPropertyForm')[0].reset()
                            form.render()
                        }, 200)
                    }
                })
            return false
        })
    })
</script>